<script>
import QSGDrawer from "@/components/QSGDrawer/index.vue";
import {getPageList} from "@/api/aihuman/log/log";

export default {
  name: "LogPreview",
  components: {QSGDrawer},
  data() {
    return {
      showDrawer: false,
      currentRow: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 20, 30, 40, 50, 100],
      },
      tableData: [],
      tableOptions: {
        //新增按钮
        addBtn: false,
        header: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        searchShowBtn: false,
        stripe: false,
        selection: true,
        height:'auto',
        tip: false,
        // simplePage: false,
        searchMenuSpan: 8,
        border: true,
        index: true,
        indexWidth: 60,
        indexLabel: "序号",
        menuWidth: 100,
        menu: false,
        align: "center",
        menuAlign: "left",
        dialogWidth: "40%",
        dialogClickModal: false,
        dialogType: "drawer",
        span: 24,
        dialogCustomClass: "huilan-drawer-form",
        emptyText: this.$t('aicosCommon.notData'),
        column: [
          {
            label: "内容",
            prop: "content",
            overHidden: true,
            width: 300
          },
          {
            label: "用户名",
            prop: "user_name",
            overHidden: true

          },
          {
            label: "Agent",
            prop: "agent",
            overHidden: true

          },
          {
            label: "角色",
            prop: "role",
            overHidden: true

          },
          {
            label: "用户id",
            prop: "user_id",
            overHidden: true

          }, {
            label: "数字人数据",
            prop: "metadata",
            overHidden: true,
            minWidth: 180

          }, {
            label: "机器人实例",
            prop: "transfiguration",
            overHidden: true,
            minWidth: 200
          },{
            label: "来源",
            prop: "source",
            overHidden: true,
            minWidth: 200
          },
          {
            label: "metadata",
            prop: "metadata",
            overHidden: true,
            minWidth: 200
          }
        ],
      },
    }
  },
  methods: {
    currentChange(current) {
      this.page.currentPage = current
      this.getList(this.currentRow.conversation)
    },
    sizeChange(size) {
      this.page.pageSize = size
      this.getList(this.currentRow.conversation)
    },
    getList(conversation) {
      this.$nextTick(async () => {
        try {
          let params = {
            pageNo: this.page.currentPage,
            pageSize: this.page.pageSize,
            conversation: conversation
          }
          const {data} = await getPageList(params)
          this.tableData = data.data.records
          this.page.total = data.data.total
        } catch (e) {
          console.log(e);
        }

      })
    },
    open(item) {
      this.showDrawer = true
      this.currentRow = item
      this.getList(item.conversation)
    }
  }
}
</script>

<template>
  <q-s-g-drawer
    ref="drawer"
    :visible.sync="showDrawer"
    size="1000px"
    title="查看详情"
  >
    <div class="item-block"><strong>会话ID：</strong>{{ currentRow.conversation }}</div>
    <div class="item-block"><strong>房间：</strong>{{ currentRow.room }}</div>
    <div class="item-block"><strong>时间：</strong>{{ currentRow.beginTime }} —— {{ currentRow.endTime }}</div>

    <avue-crud
      ref="listRef"
      :option="tableOptions"
      :page.sync="page"
      :data="tableData"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
    </avue-crud>

    <template #footer>
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="small"
        @click="showDrawer=false"
      >关 闭
      </el-button>
    </template>
  </q-s-g-drawer>
</template>

<style scoped lang="scss">
.item-block {
  margin-bottom: 10px;
}
</style>
